<template>
  <div>
    <!-- 姓：<el-input v-model="username"></el-input> 名：<el-input
      v-model="lastname"
    ></el-input>
    <div>全名：{{ dingname }}</div> -->
    <!-- <div>
      <input type="text" v-model="shur" placeholder="请输入名字" />
    </div>
    <div v-for="(item, index) in kelist" :key="index" class="header">
      {{ item.name }}-{{ item.age }}-{{ item.sex }}
      
    </div> -->
    <el-cascader :options="options" :props="props" :show-all-levels="false" placeholder="请选择" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        children: "children",
        label: "label",
        checkStrictly: true,
        emitPath: false,
      },
      // shur: "",
      // arr: [
      //   { name: "马冬梅", age: 18, sex: "女" },
      //   { name: "周冬雨", age: 25, sex: "女" },
      //   { name: "周杰伦", age: 27, sex: "男" },
      //   { name: "温兆伦", age: 24, sex: "男" },
      // ],
      // // username: "张",
      // // lastname: "三",
      // // dingname: "",
      // kelist: [],
      options:[
    {
        "children": [
            {
                "children": [
                    {
                        "children": [
                            {
                                "id": 1236994,
                                "label": "测试10",
                                "value": "G_1236994"
                            },
                            {
                                "id": 1236995,
                                "label": "888",
                                "value": "G_1236995"
                            },
                            {
                                "id": 1236996,
                                "label": "完啦",
                                "value": "G_1236996"
                            },
                            {
                                "id": 1236997,
                                "label": "你好",
                                "value": "G_1236997"
                            },
                            {
                                "id": 1236998,
                                "label": "888",
                                "value": "G_1236998"
                            },
                            {
                                "id": 1236999,
                                "label": "8",
                                "value": "G_1236999"
                            },
                            {
                                "id": 1237002,
                                "label": "8888",
                                "value": "G_1237002"
                            },
                            {
                                "id": 1236871,
                                "label": "是我",
                                "value": "G_1236871"
                            },
                            {
                                "id": 1236872,
                                "label": "TASK程序员谷歌google搜索引擎理工男码农源代码短袖纯棉T恤定制",
                                "value": "G_1236872"
                            },
                            {
                                "id": 1236873,
                                "label": "TASK程序员google developers源代码开发搜索引擎短袖纯棉T恤男夏",
                                "value": "G_1236873"
                            },
                            {
                                "id": 1236874,
                                "label": "TASK量子力学原子相对论数学公式物理理科创意短袖纯棉T恤学生男",
                                "value": "G_1236874"
                            },
                            {
                                "id": 1236875,
                                "label": "TASK青蒿素化学分子式屠呦呦Artemisinin疟疾衣服潮纯棉短袖T恤男",
                                "value": "G_1236875"
                            },
                            {
                                "id": 1236876,
                                "label": "TASK运载火箭KERBAL X物理化学理工设计线条图学生短袖T恤男女夏",
                                "value": "G_1236876"
                            },
                            {
                                "id": 1236877,
                                "label": "TASK多巴胺分子式dopamine兴奋化学肾上腺素爱情纯棉短袖T恤男夏",
                                "value": "G_1236877"
                            },
                            {
                                "id": 1236878,
                                "label": "TASK咖啡因caffeine神经兴奋剂精神药品化学分子式纯棉短袖T恤男",
                                "value": "G_1236878"
                            },
                            {
                                "id": 1236879,
                                "label": "TASK三硝基甲苯TNT烈性黄色炸药化学分子式C4雷管引爆短袖T恤男夏",
                                "value": "G_1236879"
                            },
                            {
                                "id": 1236880,
                                "label": "TASK腺嘌呤核苷三磷酸ATP高能化合物化学分子式能量短袖T恤男夏装",
                                "value": "G_1236880"
                            },
                            {
                                "id": 1236881,
                                "label": "TASK程序员996嘲讽工作制纯棉短袖T恤男女源代码农半袖休闲衣服夏",
                                "value": "G_1236881"
                            },
                            {
                                "id": 1236882,
                                "label": "TASK手枪系列M1911美国军事迷游戏CSGO纯棉短袖T恤男女圆领衣服夏",
                                "value": "G_1236882"
                            },
                            {
                                "id": 1236883,
                                "label": "TASK庞加莱猜想拓扑学学科纯棉短袖T恤男女学生休闲半袖夏季衣服",
                                "value": "G_1236883"
                            },
                            {
                                "id": 1236884,
                                "label": "TASK学科化学元素周期表门捷列夫休闲装纯棉短袖T恤男夏装训练服",
                                "value": "G_1236884"
                            },
                            {
                                "id": 1236885,
                                "label": "TASK步枪系列HK416德国军事迷绝地游戏CSGO纯棉短袖T恤男女休闲装",
                                "value": "G_1236885"
                            },
                            {
                                "id": 1236886,
                                "label": "TASK电路图circuit diagram物理电气工程纯棉短袖T恤男女上衣夏装",
                                "value": "G_1236886"
                            },
                            {
                                "id": 1236887,
                                "label": "TASK理科Maxwell麦克斯韦方程公式电磁物理学纯棉短袖T恤男女夏03",
                                "value": "G_1236887"
                            },
                            {
                                "id": 1236888,
                                "label": "TASK古巴革命领导人切格瓦拉英雄头像签名印花短袖T恤男女上衣潮",
                                "value": "G_1236888"
                            },
                            {
                                "id": 1236889,
                                "label": "TASK电子集成电路integrated circuit创意印花短袖T恤男女衣服夏",
                                "value": "G_1236889"
                            },
                            {
                                "id": 1236890,
                                "label": "TASK中国QBZ95自动步枪军事武器纯棉短袖T恤男女游戏CSGO枪迷衣服",
                                "value": "G_1236890"
                            },
                            {
                                "id": 1236892,
                                "label": "TASK中国TYPE81式自动步枪军事武器短袖T恤男女游1戏CSGO枪迷衣服",
                                "value": "G_1236892"
                            },
                            {
                                "id": 1236905,
                                "label": "TASK中国China华民族心系中华有为鲲鹏男女外套秋冬装衣服潮0001",
                                "value": "G_1236905"
                            },
                            {
                                "id": 1236907,
                                "label": "TASK空中客车Airbus A380航空客机短袖印花t恤飞行员男女宽松衣服",
                                "value": "G_1236907"
                            },
                            {
                                "id": 1236910,
                                "label": "TASK美国波音Boeing 787Dreamliner梦想客机休闲男女短袖t恤夏装",
                                "value": "G_1236910"
                            },
                            {
                                "id": 1236912,
                                "label": "TASK学科IUPAC化学元素周期表高考中考学生纯棉短袖T恤男女上衣潮",
                                "value": "G_1236912"
                            },
                            {
                                "id": 1236913,
                                "label": "TASK生活是悲伤程序员语言概念创意短袖T恤男女休闲潮牌圆领上衣",
                                "value": "G_1236913"
                            },
                            {
                                "id": 1236918,
                                "label": "TASK动物插画改造昆虫蒸汽朋克机械美学纯棉短袖T恤男女半袖0005",
                                "value": "G_1236918"
                            },
                            {
                                "id": 1236920,
                                "label": "TASK新型冠状病毒COVID-19细胞分析印花短袖T恤男女疫情防控衣服",
                                "value": "G_1236920"
                            },
                            {
                                "id": 1236921,
                                "label": "TASK非洲手鼓乐器印花纯棉短袖T恤男女音乐迷休闲半袖衫潮牌夏季",
                                "value": "G_1236921"
                            },
                            {
                                "id": 1236922,
                                "label": "TASK高中初中常用化学元素生物知识的美丽创意短袖T恤男女上衣潮",
                                "value": "G_1236922"
                            },
                            {
                                "id": 1236923,
                                "label": "TASK考的全会蒙的全对高考中考考试文字纯棉短袖T恤男女学生夏装",
                                "value": "G_1236923"
                            },
                            {
                                "id": 1236924,
                                "label": "TASK数学手绘涂鸦理科计算公式纯棉短袖T恤男女夏装学生衣服0002",
                                "value": "G_1236924"
                            },
                            {
                                "id": 1236925,
                                "label": "TASK圆周率直径面积球体积常数数学物理理科纯棉短袖T恤男学生夏",
                                "value": "G_1236925"
                            },
                            {
                                "id": 1236926,
                                "label": "TASK 中考高考稳学生毕业考试班服宽松纯棉短袖T恤男女夏定制0002",
                                "value": "G_1236926"
                            },
                            {
                                "id": 1236927,
                                "label": "TASK创意漫画程序员的日常困扰写代码纯棉短袖T恤男女潮休闲半袖",
                                "value": "G_1236927"
                            },
                            {
                                "id": 1236928,
                                "label": "TASK我的生活苦苦苦囍囍趣味文字创意纯棉短袖T恤男女上衣潮0001",
                                "value": "G_1236928"
                            },
                            {
                                "id": 1236929,
                                "label": "TASK物理学家马克斯普朗克Max Planck名言创意短袖T恤男女上衣潮",
                                "value": "G_1236929"
                            },
                            {
                                "id": 1236930,
                                "label": "TASK程序员996ICU工作制创意印花纯棉短袖T恤男女青年休闲上衣05",
                                "value": "G_1236930"
                            },
                            {
                                "id": 1236931,
                                "label": "TASK化学元素捣蛋科学家SCIENCE短袖T恤男女夏装学生休闲运动衣服",
                                "value": "G_1236931"
                            },
                            {
                                "id": 1236932,
                                "label": "TASK暗黑风嘻哈骷髅创意潮牌纯棉短袖T恤男女美式街头休闲上衣夏",
                                "value": "G_1236932"
                            },
                            {
                                "id": 1236933,
                                "label": "TASK 薛定谔的猫化学物理个性创意宽松纯棉短袖T恤男女夏季定制02",
                                "value": "G_1236933"
                            },
                            {
                                "id": 1236934,
                                "label": "TASK发挥超常高考中考加油纯棉短袖T恤学生考试夏装男女上衣衣服",
                                "value": "G_1236934"
                            },
                            {
                                "id": 1236936,
                                "label": "罗蒙（ROMON）两件装 男士纯棉短袖t恤",
                                "value": "G_1236936"
                            },
                            {
                                "id": 1236938,
                                "label": "前端程序员T恤",
                                "value": "G_1236938"
                            },
                            {
                                "id": 1236941,
                                "label": "红豆0感舒适衬衫24面切割陶瓷纽扣奢侈品级真丝般手感免烫长袖衬衫白衬衣",
                                "value": "G_1236941"
                            },
                            {
                                "id": 1236943,
                                "label": "前端IT男",
                                "value": "G_1236943"
                            },
                            {
                                "id": 1236945,
                                "label": "测试3",
                                "value": "G_1236945"
                            },
                            {
                                "id": 1236946,
                                "label": "狗头军师",
                                "value": "G_1236946"
                            },
                            {
                                "id": 1236947,
                                "label": "前端it程序员",
                                "value": "G_1236947"
                            },
                            {
                                "id": 1236948,
                                "label": "前端it程序员",
                                "value": "G_1236948"
                            },
                            {
                                "id": 1236950,
                                "label": "你好",
                                "value": "G_1236950"
                            },
                            {
                                "id": 1236951,
                                "label": "你好",
                                "value": "G_1236951"
                            },
                            {
                                "id": 1236952,
                                "label": "你好",
                                "value": "G_1236952"
                            },
                            {
                                "id": 1236957,
                                "label": "666",
                                "value": "G_1236957"
                            },
                            {
                                "id": 1236958,
                                "label": "666",
                                "value": "G_1236958"
                            },
                            {
                                "id": 1236968,
                                "label": "你好",
                                "value": "G_1236968"
                            },
                            {
                                "id": 1236979,
                                "label": "你好",
                                "value": "G_1236979"
                            },
                            {
                                "id": 1236980,
                                "label": "你好",
                                "value": "G_1236980"
                            },
                            {
                                "id": 1236981,
                                "label": "title",
                                "value": "G_1236981"
                            },
                            {
                                "id": 1236982,
                                "label": "title",
                                "value": "G_1236982"
                            },
                            {
                                "id": 1236983,
                                "label": "忽略",
                                "value": "G_1236983"
                            },
                            {
                                "id": 1236984,
                                "label": "888888",
                                "value": "G_1236984"
                            },
                            {
                                "id": 1236985,
                                "label": "888",
                                "value": "G_1236985"
                            },
                            {
                                "id": 1236986,
                                "label": "神威无敌大将军",
                                "value": "G_1236986"
                            },
                            {
                                "id": 1236987,
                                "label": "暗杀俄国",
                                "value": "G_1236987"
                            },
                            {
                                "id": 1236988,
                                "label": "你好",
                                "value": "G_1236988"
                            }
                        ],
                        "id": 1036585,
                        "label": "T恤",
                        "value": "C_1036585"
                    },
                    {
                        "children": [
                            {
                                "id": 1237000,
                                "label": "888",
                                "value": "G_1237000"
                            },
                            {
                                "id": 1236891,
                                "label": "TASK程序员谷歌google搜索引擎理工男码农源代码加绒连帽卫衣外套",
                                "value": "G_1236891"
                            },
                            {
                                "id": 1236893,
                                "label": "TASK程序员google developers源代码开发搜索引擎连帽加绒卫衣02",
                                "value": "G_1236893"
                            },
                            {
                                "id": 1236894,
                                "label": "TASK程序员996嘲讽工作制源代码农加绒连帽卫衣秋冬装休闲外套潮",
                                "value": "G_1236894"
                            },
                            {
                                "id": 1236895,
                                "label": "TASK古巴革命领导人切格瓦拉英雄头像签名印花连帽卫衣男女外套潮",
                                "value": "G_1236895"
                            },
                            {
                                "id": 1236896,
                                "label": "TASK步枪系列HK416德国军事迷绝地游戏CSGO连帽卫衣加绒男女外套",
                                "value": "G_1236896"
                            },
                            {
                                "id": 1236897,
                                "label": "TASK我爱化学连帽卫衣男女物理极客连帽卫衣男女士加绒外套秋冬装",
                                "value": "G_1236897"
                            },
                            {
                                "id": 1236898,
                                "label": "TASK青蒿素化学分子式屠呦呦Artemisinin疟疾诺贝尔连帽卫衣外套",
                                "value": "G_1236898"
                            },
                            {
                                "id": 1236899,
                                "label": "TASK薛定谔的猫化学物理连帽卫衣男女装秋冬加绒长袖外套头帽衫03",
                                "value": "G_1236899"
                            },
                            {
                                "id": 1236900,
                                "label": "TASK量子力学原子相对论数学公式物理理科连帽卫衣学生男女外套潮",
                                "value": "G_1236900"
                            },
                            {
                                "id": 1236901,
                                "label": "TASK运载火箭KERBAL X物理化学理工设计线条图连帽卫衣男女外套头",
                                "value": "G_1236901"
                            },
                            {
                                "id": 1236902,
                                "label": "TASK三硝基甲苯TNT烈性黄色炸药化学分子式C4雷管引爆连帽卫衣冬",
                                "value": "G_1236902"
                            },
                            {
                                "id": 1236903,
                                "label": "TASK腺嘌呤核苷三磷酸ATP高能化合物化学分子式能量连帽卫衣外套",
                                "value": "G_1236903"
                            },
                            {
                                "id": 1236904,
                                "label": "TASK多巴胺分子式dopamine兴奋化学肾上腺素爱情连帽卫衣男女外套",
                                "value": "G_1236904"
                            },
                            {
                                "id": 1236906,
                                "label": "TASK电子集成电路integrated circuit创意印花连帽卫衣男女装衣服",
                                "value": "G_1236906"
                            },
                            {
                                "id": 1236908,
                                "label": "TASK理科Maxwell麦克斯韦方程公式电磁物理学连帽卫衣男女外套03",
                                "value": "G_1236908"
                            },
                            {
                                "id": 1236909,
                                "label": "TASK数学舞三角函数二次方程开根号绝对值学生连帽卫衣男女装外套",
                                "value": "G_1236909"
                            },
                            {
                                "id": 1236911,
                                "label": "TASK圣诞鹿头Merry Christmas圣诞节创意连帽卫衣男女街头外套潮",
                                "value": "G_1236911"
                            },
                            {
                                "id": 1236914,
                                "label": "TASK咖啡因caffeine神经兴奋剂精神药品化学分子式连帽卫衣男外套",
                                "value": "G_1236914"
                            },
                            {
                                "id": 1236915,
                                "label": "TASK学科IUPAC化学元素周期表高考中考学生连帽卫衣男女上衣外套",
                                "value": "G_1236915"
                            },
                            {
                                "id": 1236916,
                                "label": "TASK蒸汽朋克STEAMPUNK机械改造变色龙插画连帽卫衣男女外套0005",
                                "value": "G_1236916"
                            },
                            {
                                "id": 1236917,
                                "label": "TASK我的生活苦苦苦囍囍趣味文字创意加绒连帽卫衣男女外套潮0001",
                                "value": "G_1236917"
                            },
                            {
                                "id": 1236919,
                                "label": "TASK物理学家马克斯普朗克Max Planck名言创意连帽卫衣男女外套潮",
                                "value": "G_1236919"
                            },
                            {
                                "id": 1236940,
                                "label": "智学无忧",
                                "value": "G_1236940"
                            },
                            {
                                "id": 1236944,
                                "label": "dddd",
                                "value": "G_1236944"
                            }
                        ],
                        "id": 1036586,
                        "label": "卫衣",
                        "value": "C_1036586"
                    }
                ],
                "id": 1036584,
                "label": "衣服",
                "value": "C_1036584"
            },
            {
                "children": [
                    {
                        "children": [],
                        "id": 1036607,
                        "label": "12313",
                        "value": "C_1036607"
                    }
                ],
                "id": 1036587,
                "label": "裤子",
                "value": "C_1036587"
            },
            {
                "children": [],
                "id": 1036599,
                "label": "333",
                "value": "C_1036599"
            },
            {
                "children": [
                    {
                        "children": [],
                        "id": 1036606,
                        "label": "123",
                        "value": "C_1036606"
                    }
                ],
                "id": 1036605,
                "label": "1231",
                "value": "C_1036605"
            }
        ],
        "id": 1036575,
        "label": "男装",
        "value": "C_1036575"
    },
    {
        "children": [
            {
                "children": [
                    {
                        "children": [
                            {
                                "id": 1237001,
                                "label": "9",
                                "value": "G_1237001"
                            },
                            {
                                "id": 1236935,
                                "label": "Unimall开源商城永久授权",
                                "value": "G_1236935"
                            }
                        ],
                        "id": 1036590,
                        "label": "商用授权",
                        "value": "C_1036590"
                    }
                ],
                "id": 1036589,
                "label": "开源",
                "value": "C_1036589"
            }
        ],
        "id": 1036588,
        "label": "授权",
        "value": "C_1036588"
    },
    {
        "children": [
            {
                "children": [
                    {
                        "children": [
                            {
                                "id": 1236942,
                                "label": "商场同款naivee纳薇2022春季新款浪漫端庄气质翻领打褶袖衬衫 白色 160/84A/M",
                                "value": "G_1236942"
                            }
                        ],
                        "id": 1036593,
                        "label": "卫衣",
                        "value": "C_1036593"
                    }
                ],
                "id": 1036592,
                "label": "衣服",
                "value": "C_1036592"
            }
        ],
        "id": 1036591,
        "label": "女装",
        "value": "C_1036591"
    },
    {
        "children": [],
        "id": 1036601,
        "label": "3213123",
        "value": "C_1036601"
    }
]
    };
  },
  //计算属性实现模糊查询
  // computed: {
  //   kelist() {
  //     return this.arr.filter((item) => {
  //       return item.name.indexOf(this.shur) !== -1;
  //     });
  //   },
  //   // dingname(){
  //   //     return this.username + '-' + this.lastname
  //   // },
  // },
  //监听实现模糊查询
  // watch: {
  //   shur:{
  //       immediate:true,
  //       handler(val){
  //         this.kala =  this.arr.filter((item)=>{
  //               return item.name.indexOf(val) !== -1
  //           })
  //       }
  //   }
  //   username(val) {
  //     this.dingname = val + "-" + this.lastname;
  //   },
  //   lastname(vals) {
  //     this.dingname = this.username + "-" + vals;
  //   },
  // ishah:{
  //     immediate:true, //加上立即调用
  //     handler(newvalue,oldvalue){ //一个新值，一个旧值
  //         console.log("ishah被修改了",newvalue,oldvalue)
  //     }
  // }
  // },
  methods: {
    //   ros() {
    //     this.ishah = !this.ishah;
    //   },
  },
};
</script>

<style lang="less" scope>
.header {
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
</style>
